<template>
  <div class="view-container">
    <el-card class="info-card">
      <div v-show="!edit">
        <el-button type="text" class="edit-btn" @click.stop.prevent="editForm()">修改</el-button>
        <el-form label-width="100px">
          <el-form-item>
          <span slot="label">
            店铺头像:<br />
            (300*300)
          </span>
          <div class="avatar-wp" :class="{'preview':!!showInfo.shopLogo}">
            <img v-if="showInfo.shopLogo" class="avatar" :src="processImg(showInfo.shopLogo)"/>
          </div>
          </el-form-item>
          <el-form-item label="店铺名称:">
            <el-input v-model="showInfo.shopName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:">
            <el-input v-model="showInfo.shopPhone" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="店铺地址:">
            <el-input v-model="showInfo.shopAddress" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div v-show="edit">
        <el-form label-width="100px" :model="editInfo" :rules="rules" ref="form">
          <el-form-item>
            <span slot="label">
              店铺头像:<br />
              (300*300)
            </span>
            <resource-manager type="cards" dir="merchant" :cards-num="1" :cards-list="[{url:editInfo.shopLogo}]" :modal="false" @insert-success="insertImgsSuccess"></resource-manager>

          </el-form-item>

          <el-form-item label="店铺名称:" prop="shopName">
            <el-input v-model="editInfo.shopName" placeholder="请输入店铺名称"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" prop="shopPhone">
            <el-input v-model="editInfo.shopPhone" placeholder="请输入店铺联系电话"></el-input>
          </el-form-item>
          <el-form-item label="店铺地址:" prop="shopAddress">
            <el-input v-model="editInfo.shopAddress" placeholder="请输入店铺地址"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="saving" @click="saveSubmit('form')">保存</el-button>
            <el-button @click="edit=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

  </div>
</template>

<script>
  import ResourceManager from '@/components/ResourceManager';

  import {getInfo,modifyStoreInfo} from '@/api/user';
  import {showMessage} from '@/utils/message';
  import {validatePhoneNum2} from '@/utils/validate';
  import {osshost} from '@/api/util/fetch';

  export default {
    name: 'storeInfo',
    components:{
      'resource-manager':ResourceManager,
    },
    data ()
    {
      const validatePhone = (rule, value, callback) =>
      {
        if (value.length <=0)
        {
          callback(new Error('请输入联系电话'));
        }
        else if(!validatePhoneNum2(value))
        {
          callback(new Error('联系电话输入有误，请重新输入'));
        }
        else
        {
          callback()
        }
      };
      return {
        edit:false, //开启编辑状态
        saving:false, //正在保存
        showInfo:{
          shopLogo:'',
          shopName:'',
          shopPhone:'',
          shopAddress:'',
          version:'',
        },
        editInfo:{
          shopLogo:'', //上传到服务器的图片地址
          shopName:'',
          shopPhone:'',
          shopAddress:'',
          version:'',
        },
        rules:{
          shopName:[
            {required:true, message:'请输入店铺名称',trigger:'blur'},
          ],
          shopPhone:[
            {required:true, validator:validatePhone,trigger:'blur'},
          ],
          shopAddress:[
            {required:true, message:'请输入店铺地址',trigger:'blur'},
          ],
        },
      }
    },
    mounted()
    {
      this.getAccount();
    },
    methods: {
      getAccount()
      {
        getInfo().then((resp)=>{
          let data = resp.data;
          this.showInfo.shopLogo = data.shopLogo;
          this.showInfo.shopName = data.shopName;
          this.showInfo.shopPhone = data.shopPhone;
          this.showInfo.shopAddress = data.shopAddress;
          this.showInfo.version = data.version;

        }).catch((err)=>{

        });
      },
      editForm()
      {
        this.editInfo.shopLogo = this.showInfo.shopLogo;
        this.editInfo.shopName = this.showInfo.shopName;
        this.editInfo.shopPhone = this.showInfo.shopPhone;
        this.editInfo.shopAddress = this.showInfo.shopAddress;
        this.editInfo.version = this.showInfo.version;

        this.edit = true;

      },
      saveSubmit(formName)
      {
        this.$refs[formName].validate(valid =>
        {
          if (valid)
          {
            this.saving = true;
            let data = {
              shopLogo:this.editInfo.shopLogo,
              shopName:this.editInfo.shopName,
              shopPhone:this.editInfo.shopPhone,
              shopAddress:this.editInfo.shopAddress,
              version:this.editInfo.version,
            };

            modifyStoreInfo(data).then((resp)=>{
              showMessage({title:'店铺信息修改成功',type:'success'});

              //更新显示信息
              this.showInfo.shopLogo = this.editInfo.shopLogo;
              this.showInfo.shopName = this.editInfo.shopName;
              this.showInfo.shopPhone = this.editInfo.shopPhone;
              this.showInfo.shopAddress = this.editInfo.shopAddress;

              this.edit = false;

              this.saving = false;

              //更新页面sidebar头像
              if(this.editInfo.shopLogo)
              {
                 this.$store.dispatch('updateUserAvatar', this.editInfo.shopLogo);
              }

            }).catch((err)=>{
              this.saving = false;

            });
          } else
          {
            return false;
          }
        })
      },
      insertImgsSuccess(files) //上传成功后获取回调
      {
        this.editInfo.shopLogo = files[0].url;
      },
      processImg(url)
      {
        if(url && url !=='undefined')
        {
          return osshost + url + '?x-oss-process=image/resize,w_100';
        }

        return '';
      }
    },
  }
</script>

<style lang="scss" scoped>
  .info-card {
    max-width: 600px;
    box-shadow: none;
    padding: 30px 50px 10px 0;
    position: relative;

    .edit-btn
    {
      position: absolute;
      right: 20px;
      top: 10px;
      display: none;
    }

    &:hover
    {
      .edit-btn
      {
        display: block;
      }
    }

    .avatar-wp
    {
      width: 100px;
      height: 100px;
      border: 1px dashed #d1dbe5;
      border-radius: 6px;
      position: relative;
      overflow: hidden;

      .avatar
      {
        width: 100px;
        height: 100px;
        display: block;
      }

      &.preview
      {
        border: none;
      }

    }

  }

  .info-dialog
  {
    .info-dialog-form
    {
      max-width: 200px;
      margin-top: 30px;
    }
  }
</style>
